<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header height=100px>
      <div class="top-header">
        <div>
          <span>统计报表&nbsp&nbsp/&nbsp&nbsp</span>
          <span class="font">统计报表</span>
        </div>
        <div>
          <el-button size="medium" type="success" plain>打印</el-button>
          <el-button size="medium" type="success" plain>退出</el-button>
        </div>
      </div>
      <div class="bottom-container">
        <span class="font-middle">所属公司：</span>
        <el-radio-group v-model="radio1" text-color="#fff" fill="#277f7b" >
          <el-radio-button label="国网北京电力公司" ></el-radio-button>
          <el-radio-button label="国网天津市电力公司" ></el-radio-button>
          <el-radio-button label="国网河北省电力有限公司"></el-radio-button>
          <el-radio-button label="国网冀北电力有限公司"></el-radio-button>
        </el-radio-group>
        <!-- <el-button type="text" color="black">文字按钮</el-button>
        <el-button type="text">文字按钮</el-button>
        <el-button type="text">文字按钮</el-button>
        <el-button type="text">文字按钮</el-button> -->
      </div>

    </el-header>
    <!-- 主体 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="250px" >
        <!-- 侧边菜单栏 -->
        <el-menu background-color="#fff" text-color="#595959" active-text-color="#277f7b">

          <el-menu-item index="1" >
            <span slot="title">2020综合计划建议列表</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">2020综合计划建议下达表</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧内容 -->
      <el-main>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" highlight-current-row @current-change="handleCurrentChange" :row-class-name="tabRowClassName">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="name" label="项目名称" sortable width="260">
          </el-table-column>
          <el-table-column prop="units" label="单位" width="120">
          </el-table-column>
          <el-table-column label="2020年" align="center">
            <el-table-column prop="province" label="1~10月实际" width="120">
            </el-table-column>
            <el-table-column prop="city" label="全年预计" width="120">
            </el-table-column>
            <el-table-column prop="address" label="计划建议" width="120">
            </el-table-column>
          </el-table-column>
          <el-table-column label="2021年" align="center">
            <el-table-column prop="zip" label="较上年增长" min-width="120">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script >

export default ({
  data() {
    return {
      tableData: [{
        name: '资本总投入',
        units: '万元',
        province: '58.0000',
        city: '58.0000',
        address: '58.0000',
        zip: '20%'
      }, {
        name: '成本总投入',
        units: '万元',
        province: '58.0000',
        city: '58.0000',
        address: '58.0000',
        zip: '20%'
      }, {
        name: '资本总投入',
        units: '万元',
        province: '58.0000',
        city: '58.0000',
        address: '58.0000',
        zip: '20%'
      }, {
        name: '资本总投入',
        units: '万元',
        province: '58.0000',
        city: '58.0000',
        address: '58.0000',
        zip: '20%'
      }, ],
      selectID: [],
      radio1: '国网北京电力公司',
    }
  },
  created() { },
  methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },

    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1;
      if (index % 2 == 0) {
        return 'warning-row'
      }
    }
  }
})
</script>
<style scoped>
.home-container {
  height: 100%;
}
.font {
  color: #277f7b;
}
.font-middle {
  font-size: 14px;
}
.el-header {
  background-color: #ecedf1;
  padding: 0;
}
.top-header {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
}
.bottom-container {
  margin-left: 0;
  margin-top: 5px;
  padding-left: 20px;
  background-color: #fff;
  width: 100%;
}
.el-aside {
  font-weight: 500;
}
.el-aside .is-active {
background-color: #e6f7ff !important;
font-weight: 700 !important;
}

.el-menu-item {
  font-size: 15px;
}
.el-radio-button {
  margin-right:30px;
}


</style>
<style >
.el-table .warning-row {
  background: #f8fffd;
}

.el-table tbody tr:hover > td {
  background-color: #eff8f0 !important;
}
</style>
